<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<h2>{{'common_basic_info_label' | i18n}}</h2>
<lv-form>
    <lv-group lvGutter='16px'>
        <lv-group>
            <i [lv-icon]='basicInfo.icon' class="base-info-icon"></i>
            <lv-group lvDirection='vertical'>
                <lv-form-item class="info">
                    <lv-form-label>{{'common_name_label' | i18n}}</lv-form-label>
                    <lv-form-control>
                        <span lv-overflow>{{basicInfo.name}}</span>
                    </lv-form-control>
                </lv-form-item>
                <lv-form-item class="info">
                    <lv-form-label>{{'common_type_label' | i18n}}</lv-form-label>
                    <lv-form-control>
                        <span>{{basicInfo.type}}</span>
                    </lv-form-control>
                </lv-form-item>
                <lv-form-item class="info">
                    <lv-form-label>{{'common_status_label' | i18n}}</lv-form-label>
                    <lv-form-control>
                        <aui-status [value]='basicInfo.linkStatus' type='resource_LinkStatus'></aui-status>
                    </lv-form-control>
                </lv-form-item>
            </lv-group>
        </lv-group>
        <div class="border"></div>
        <lv-group>
            <i [lv-icon]='slaInfo.icon' class="base-info-icon"></i>
            <lv-group lvDirection='vertical'>
                <lv-form-item class="info">
                    <lv-form-label>{{'protection_protected_status_label' | i18n}}</lv-form-label>
                    <lv-form-control>
                        <aui-status [value]='slaInfo.activation' type='Sla_Status'></aui-status>
                    </lv-form-control>
                </lv-form-item>
                <lv-form-item class="info">
                    <lv-form-label>{{'common_sla_label' | i18n}}</lv-form-label>
                    <lv-form-control>
                        <span lv-overflow>
                            <sla-type [name]='slaInfo.sla'></sla-type>
                        </span>
                    </lv-form-control>
                </lv-form-item>
                <lv-form-item class="info">
                    <lv-form-label>{{'common_sla_compliance_label' | i18n}}</lv-form-label>
                    <lv-form-control>
                        <aui-status [value]='slaInfo.slaCompliance' type='Sla_Compliance'></aui-status>
                    </lv-form-control>
                </lv-form-item>
            </lv-group>
        </lv-group>
    </lv-group>
</lv-form>
<lv-tabs [(lvActiveIndex)]="tabActiveIndex" (lvActiveIndexChange)="tabChange($event)"
    [ngClass]="{'tab-single':item.resType === resourceType.HYPERV}">
    <lv-tab *ngIf="type === resourceType.CLUSTER" lvTitle='{{"common_host_label" | i18n}}' [lvId]="resourceType.HOST">
        <ng-template lv-tab-lazy>
            <lv-datatable [lvData]='hostTableData' lvSize="small" #lvHostTable [lvPaginator]='hostPage' lvAsync>
                <thead>
                    <tr>
                        <th lvCellKey='name' lvShowCustom>
                            {{'common_name_label' | i18n}}/{{'common_ip_address_label' | i18n}}
                            <div lvCustom>
                                <aui-custom-table-search (search)="searchByHostName($event)"
                                    filterTitle="{{'common_name_label' | i18n}}/{{'common_ip_address_label' | i18n}}"></aui-custom-table-search>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <ng-container *ngFor='let item of lvHostTable.renderData'>
                        <tr>
                            <td>
                                <span lv-overflow>{{item.name}}</span>
                            </td>
                        </tr>
                    </ng-container>
                </tbody>
            </lv-datatable>
            <div class="aui-paginator-wrap">
                <lv-paginator [lvTotal]='hostTotal' lvMode='simple' [lvPageSize]="hostPageSize"
                    [lvPageIndex]="hostPageIndex" [lvShowPageSizeOptions]='false' #hostPage [hidden]="!hostTotal"
                    (lvPageChange)="hostPageChange($event)">
                </lv-paginator>
            </div>
        </ng-template>
    </lv-tab>

    <lv-tab lvTitle='{{"common_virtual_machine_label" | i18n}}' [lvId]="resourceType.VM">
        <ng-template lv-tab-lazy>
            <lv-datatable [lvData]='vmTableData' lvSize="small" #lvVmTable [lvPaginator]='vmPage' lvAsync>
                <thead>
                    <tr>
                        <th lvCellKey='name' lvShowCustom>
                            {{'common_name_label' | i18n}}
                            <div lvCustom>
                                <aui-custom-table-search (search)="searchByVmName($event)"
                                    filterTitle="{{'common_name_label' | i18n}}"></aui-custom-table-search>
                            </div>
                        </th>
                        <th lvCellKey='sla_name' lvShowCustom>
                            {{'common_sla_label' | i18n}}
                            <div lvCustom>
                                <aui-custom-table-search (search)="searchByVmSlaName($event)"
                                    filterTitle="{{'common_sla_label' | i18n}}"></aui-custom-table-search>
                            </div>
                        </th>
                        <th lvCellKey='sla_status' lvShowFilter="true" (lvFilterChange)="vmFilterChange($event)"
                            [(lvFilters)]="slaStatusFilterMap" lvFilterCheckAll>
                            {{'protection_protection_activation_label' | i18n}}
                        </th>
                        <th width='144px'>{{'common_operation_label' | i18n}}</th>
                    </tr>
                </thead>
                <tbody>
                    <ng-container *ngFor='let item of lvVmTable.renderData'>
                        <tr>
                            <td>
                                <span lv-overflow>
                                    {{item.name}}
                                </span>
                            </td>
                            <td>
                                <span lv-overflow>
                                    <sla-type [name]='item.sla_name'></sla-type>
                                </span>
                            </td>
                            <td>
                                <aui-status [value]="item.sla_status" type="Sla_Status">
                                </aui-status>
                            </td>
                            <td>
                                <lv-operation-menu [lvData]='item' [lvItemsFn]='vmOptsCallback'></lv-operation-menu>
                            </td>
                        </tr>
                    </ng-container>
                </tbody>
            </lv-datatable>
            <div class="aui-paginator-wrap">
                <lv-paginator (lvPageChange)="vmPageChange($event)" [lvPageSize]="vmPageSize"
                    [lvPageIndex]="vmPageIndex" [lvTotal]='vmTotal' lvMode='simple' [lvShowPageSizeOptions]='false'
                    #vmPage [hidden]="!vmTotal">
                </lv-paginator>
            </div>
        </ng-template>
    </lv-tab>
    <lv-tab *ngIf="item.resType === resourceType.VM" lvTitle='{{"protection_vm_node_label" | i18n}}' lvId="Disk">
        <ng-template lv-tab-lazy>
            <lv-datatable [lvData]='diskTableData' lvSize="small" #lvDiskTable [lvPaginator]='diskPage'>
                <thead>
                    <tr>
                        <th lvCellKey='slot' lvShowCustom>
                            {{'common_slot_label' | i18n}}
                            <div lvCustom>
                                <aui-custom-table-search (search)="searchByDiskName($event)"
                                    filterTitle="{{'common_slot_label' | i18n}}"></aui-custom-table-search>
                            </div>
                        </th>
                        <th lvCellKey='sla_name' lvShowCustom>
                            {{'common_sla_label' | i18n}}
                            <div lvCustom>
                                <aui-custom-table-search (search)="searchByDiskSlaName($event)"
                                    filterTitle="{{'common_sla_label' | i18n}}"></aui-custom-table-search>
                            </div>
                    </tr>
                </thead>
                <tbody>
                    <ng-container *ngFor='let item of lvDiskTable.renderData'>
                        <tr>
                            <td>
                                <span>{{item.slot}}</span>
                            </td>
                            <td>
                                <span lv-overflow>
                                    <sla-type [name]='item.sla_name'></sla-type>
                                </span>
                            </td>
                        </tr>
                    </ng-container>
                </tbody>
            </lv-datatable>
            <div class="aui-paginator-wrap">
                <lv-paginator lvMode='simple' [lvPageSize]="diskPageSize" [lvShowPageSizeOptions]='false' #diskPage
                    [hidden]="!lvTable?.renderData?.length">
                </lv-paginator>
            </div>
        </ng-template>
    </lv-tab>
</lv-tabs>

<ng-template #headerTpl>
    <aui-custom-modal-operate [item]="item"></aui-custom-modal-operate>
</ng-template>
